<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true">
      <el-form-item label=" 猪场名称"  prop="pigFarmName">
        <el-input v-model="queryParams.pigFarmName" clearable/>
      </el-form-item>
      <el-form-item label="项目名称"  prop="projectName">
        <el-input v-model="queryParams.projectName" clearable/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <el-button icon="el-icon-download" type="primary" size="mini" @click="exportData">导出</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="list"  border size="mini"
              :height="listHeight || fillHeight('listHeight',['queryForm','add','pagination'],['hamburger-container','tags-view-container'], 130)">
      <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
      <el-table-column label="猪场名称" prop="pigFarmName" :show-overflow-tooltip="true" align="center"/>
      <el-table-column label="立项名称" prop="projectName" :min-width="140" :show-overflow-tooltip="true" align="center"/>
      <el-table-column label="猪场类型" prop="pigFarmType" align="center">
        <template slot-scope="scope">
          <span v-show="scope.row.pigFarmType == '1'">繁殖场</span>
          <span v-show="scope.row.pigFarmType == '2'">育肥场</span>
          <span v-show="scope.row.pigFarmType == '3'">租赁代养场</span>
          <span v-show="scope.row.pigFarmType == '4'">种猪场</span>
          <span v-show="scope.row.pigFarmType == '5'">自养小区</span>
          <span v-show="scope.row.pigFarmType == '6'">租赁繁殖场</span>
          <span v-show="scope.row.pigFarmType == '7'">公猪站</span>
        </template>
      </el-table-column>
      <el-table-column label="预算金额" prop="budgetAmount" :show-overflow-tooltip="true" align="center"/>
      <el-table-column label="合同金额" prop="contractAmount" :show-overflow-tooltip="true" align="center"/>
      <el-table-column label="结算金额" prop="balanceAmount" :show-overflow-tooltip="true" align="center"/>
      <el-table-column label="已申请支付总金额" prop="applyTotalAmount" :show-overflow-tooltip="true" align="center"/>
      <el-table-column label="财务已付金额" prop="prepaidAmount" :show-overflow-tooltip="true" align="center"/>
      <el-table-column label="财务待付金额" prop="prepaidAmount" :show-overflow-tooltip="true" align="center"/>
    </el-table>

    <!--    分页-->
    <BasePagination :that="this" ref="pagination"/>
  </div>
</template>

<script>
  import { listForm ,exportDatas} from "./statisticalMoneyReport.js";
  import BaseIndex from '@/views/base/BaseIndex'
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import {getTreeselect} from "@/api/progressManagement/constructionPlan";
  import BasePagination from "@/views/base/BasePagination";
  export default {
    name: "ReportManagementStatisticalMoneyReport",
    extends: BaseIndex,
    components: {BasePagination, Treeselect },
    data() {
      return {
        listHeight:0,
        zoneList:[],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          pigFarmName: undefined,
          projectName: undefined,
        },
        list:[],
        props:{
          value:'id',
          label:'label'
        }
      };
    },
    watch: {

    },
    created() {
      this.getList();
      getTreeselect().then(
        response => {
          if(response && response.code ===0){
            this.zoneList = response.data
          }else{
            this.msgError(response.msg)
          }
          this.loading = false;
        }
      );
    },
    methods: {
      listForm, // 导出文件
      exportData(){
        exportDatas(this.queryParams).then(res=>{
          let link = document.createElement('a');
          link.href = URL.createObjectURL(res);
          link.setAttribute('download','项目资金流程追踪表.xls');
          link.click();
          link = null;
        }).catch(err=>{
        });
      },
      getList() {
        this.loading = true;
        return listForm(this.queryParams).then(
          response => {
            if(response && response.code ===0){
              this.list = response.data.records
              this.total = response.data.total
            }else{
              this.msgError(response.msg)
            }
            this.loading = false;
          }
        ).catch(err=>{
          this.loading = false;
        });
      },
    }
  };
</script>
